$(function(){
    // 获取 ul
    let oul = document.querySelector(".ulbox")
    // 接收 标题的 titleId
    let titleArr = [];
    // 接收 每一个div中的内容
    let contentArr = [];
    
    // 发送请求 一级 标题    同步
    const xhr1 = new XMLHttpRequest();
    xhr1.open("get","http://chst.vip:1234/api/getbrandtitle",false);
    xhr1.onreadystatechange = function(){
        if(xhr1.readyState === 4){
            if(xhr1.status === 200){
                let res1 = JSON.parse(xhr1.response);
                let ele = "";
                // console.log(res1);
                // console.log(res1.result);
                res1.result.forEach(item=>{
                    // 把每个 titleId 存起来
                    titleArr.push(item.brandTitleId);
                    // 拼接 每一个 一级标题的 结构
                    ele += `<li>
                                <h4>
                                    ${item.brandTitle}
                                    <i class="fr">▼</i>
                                </h4>
                                <div class="listcontainer"></div>
                            </li>`
                });
                // 写入到 ul中
                oul.innerHTML = ele;
            }
        }
    }
    xhr1.send(null)

    // 发送 二级内容的 请求   同步      value是每个 titleId
    titleArr.forEach(value=>{
        const xhr2 = new XMLHttpRequest();
        xhr2.open("get","http://chst.vip:1234/api/getbrand?brandtitleid="+value,false);
        xhr2.onreadystatechange = function(){
            if(xhr2.readyState === 4){
                if(xhr2.status === 200){
                    let res2 = JSON.parse(xhr2.response);
                    console.log(res2);
                    let divContent = ""
                    res2.result.forEach(function(item,index) {
                        divContent +=`
                            <div class="listbox" brandtitleid=${item.brandTitleId}>
                                <a href="#">
                                    <i>${index}</i>
                                    ${item.brandName}
                                    <div class="sell">
                                    ${item.brandInfo}
                                    </div>
                                </a>
                            </div>
                          `          
                    });
                    // 把 每个 div中内容 添加到 数组中
                    contentArr.push(divContent);
                    // 清空 为下次 拼接 内容准备
                    divContent = ""
                }
            }
        }
        xhr2.send(null)
    })
    
    // 获取到 每个 div 给 div中 写入 存在数组中的 内容
    let aDiv = document.querySelectorAll("#main .ulbox li .listcontainer")
    console.log(aDiv);
    aDiv.forEach((item,index)=>{
       //  console.log(item)
       //  console.log(contentArr[index])
        item.innerHTML = contentArr[index];   
    });



    let up = document.querySelectorAll(".listbox")
        console.log(up);
        for(var i=0;i<up.length;i++){
            up[i].onclick=function(){
                let id=this.getAttribute('brandtitleid')
                console.log(id)
                location.href='./brandlist.html?brandtitleid='+id
            }
        }
    
    

    //  slideDown   展开高度      自动动画效果
    //  slideUp     收起高度      自动动画效果

    // console.log($("#ulbox"))
    // console.log($("#ulbox").find("div"))

    $(".ulbox").find("div").slideUp(0,function(){
        $(".ulbox").css("display","block");
        $('div').prop('flag', false)
    });


    // console.log($("#ulbox li"))

   $('.ulbox').on('click', 'li', function () {
       let flag = $(this).find('div').prop('flag')
       // console.log($(this))
       if(flag){
           $(this).find('div').slideUp(200).prop('flag', false);
           return;
       }
       
       $(this).find('div').slideDown(200).prop('flag', true).parent().siblings().find('div').slideUp(200).prop('flag', false);    
   })
})